<template>
  <div class="top" id="patTop">
    <div class="top-box">
      <div class="top-icon"/>
      <div class="header-banner">
        <div v-for="(item,index) in topTitle"  class="banner-item-wrap" @click="clickTitle(item)">
          <div class="banner-item" :style="index === active ? 'opacity: 1;' :''">
            {{item.title}}
          </div>
          <div class="banner-divide" :style="index === active ? 'opacity: 1;' :''"/>
        </div>
      </div>
    </div>
  </div>
  <RouterView @path="getPath" @top="getTop"/>

</template>

<script setup>
import { RouterView, useRouter } from 'vue-router'
import { onMounted, reactive, ref } from 'vue'
let topTitle = reactive([
  {
    id:0,
    title: '首页',
    path: '/',
  },
  {
    id:1,
    title: '清苑智造',
    path: '/fabricate',
  },
  {
    id:2,
    title: '清苑少年',
    path: '/boy',
  },
  {
    id:3,
    title: '清苑故事',
    path: '/tale',
  },
  {
    id:4,
    title: '关于我们',
    path: '/about',
  }
])
let active = ref(0)
let router = useRouter()

onMounted(()=>{
  var path = window.location.pathname
  topTitle.map(item => {
    item.path === path ? active.value = item.id : ''
  })
})
function clickTitle(item){
  active.value = item.id
  router.push(item.path)
}
function getPath(data){
  console.log(data)
  topTitle.map(item => {
    item.path === data ? active.value = item.id : ''
  })
}

function getTop(data) {
  let top = document.getElementById('patTop')
  if(data > 200){
    top.style.backgroundColor='#72d1f3'
  }else {
    top.style.backgroundColor='rgba(255, 255, 255, 0)'
  }
}

</script>

<style>
*{
  margin: 0;
}
*, :after, :before{
  box-sizing: border-box;
}
/* 隐藏浏览器自带的滚动条 */
body::-webkit-scrollbar {
  width: 0; /* 调整滚动条宽度 */
}

body::-webkit-scrollbar-track {
  background-color: transparent; /* 设置滚动条轨道背景色为透明 */
}

body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* 设置滚动条滑块颜色 */
  border-radius: 0.25em; /* 设置滚动条滑块圆角 */
}

/* 显示页面内的滚动条 */
.scrollable-content {
  overflow-y: auto; /* 启用垂直滚动条 */
}
</style>
<style scoped>
.top{
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 90px;
  justify-content: center;
  left: 0;
  margin: 0 auto;
  padding: 0 0 0 3vw;
  position: fixed;
  top: 0;
  transition: all .5s;
  width: 100%;
  z-index: 999;
  .top-box{
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    .top-icon{
      background-image: url();
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: 100%, 100%;
      height: 74px;
      width: 149px;
    }
    .header-banner{
      align-items: center;
      color: #ffffff;
      display: flex;
      height: 34px;
      justify-content: space-between;
      .banner-item-wrap{
        height: 31px;
        margin: 0 69px 0 0;
        padding: 0 8px;
        .banner-item{
          font-size: 20px;
          height: 23px;
          line-height: 23px;
          opacity: 0.5;
          transition: all .2s ease-in-out;
          user-select: none;
          cursor: pointer;
          color: #ffffff;
        }
        .banner-divide{
          height: 2px;
          margin-top: 8px;
          width: 100%;
          background-color: #ffffff;
          opacity: 0;
        }
      }
    }

  }
}
.clear{
  color: #050505;
  background-color: rgba(255, 255, 255, 0);
}
</style>
